<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 圆角带刻度仪表图样式1
 * @FilePath: \web-ems\src\component\board\charts\MultipleLine.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading } from "@/core/tools/common";
import {useStore} from "vuex";
export default {
  //echartsInstance = null,
  props: {
    titleName: {
      type: String,
      default: "多维曲线",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    isStack: {
      type: Boolean,
      default: false,
    },
    legendData: {
      type: Array,
      default: [
        { name: "中国", key: "CN" },
        { name: "美国", key: "US" },
        { name: "澳洲", key: "EUR" },
        { name: "欧洲", key: "AU" },
        { name: "非洲", key: "EM" },
      ],
    },
    xAxisData: {
      type: Array,
      default: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    fontSize: {
      default: 18,
      type: Number,
    },
    color: {
      type: Array,
      default: ["#1F9EFF", "#1BC85E", "#FFC107", "#FF6C6B"],
    },
    seriesData: [],
    autosize: {
      type: Boolean,
      default: true,
    },
  },
  setup: function (props, context) {
     let chartInstance = null; //折线不能用响应式接收echart
     
    const store = useStore(); 
    const themeColors = reactive({
      font:'#fff' 
    });

    themeColors.font = computed(() => {
        if (store.getters.theme=="theme-night") {
          return '#fff'
        }else{
           return '#000'
        }
    })
    const theme =  computed(() => store.getters.theme);
    watch(theme,(newtheme,oldInfo)=>{   
      f_echartInit(chartInstance);
    })
      
    
   
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });

    

    const _resetChartStyle = computed({
      get() {
        if(props.autosize){ 
           return resetChartStyle();
        }else{ 
          return {} ;
        }
       
      },
    });

    const f_echartInit = (chartdom) => {
      // 指定图表的配置项和数据
      /* ------------------begin------------------ */
      const option = {
        color: props.color,
        title: {
          text: props.titleName,
          textStyle: {
            color: themeColors.font,
            fontSize: props.fontSize,
            textAlign: "center",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: props.legendData,
          textStyle: {
            color:themeColors.font,
            fontSize: props.fontSize,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false,
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: props.xAxisData,
          axisLabel: {
            fontSize: props.fontSize,
          },
        },
        yAxis: {
          type: "value",
          splitNumber:4,
          //坐标轴内线的样式
          splitLine: {
            lineStyle: {
              color: "rgba(112,112,112,0.5)",
              type: "dashed", //虚线
            },
          },
          axisLabel: {
            fontSize: props.fontSize,
          },
        },
        textStyle: {
          color: themeColors.font, 
          fontSize:props.fontSize
        },
        series: [],
      };

      for (let i = 0; i < props.legendData.length; i++) {
        let obj = {
          name: String,
          type: String,
          stack: String,
          data: Array,
        };

        let key = props.legendData[i]["key"];

        (obj["name"] = props.legendData[i]["name"]),
          (obj["type"] = "line"),
          (obj["stack"] = props.isStack ? "o" : i),
          (obj["data"] = props.seriesData[key]),
          option.series.push(obj);
      }

      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>
